<template>
  <div>
    <!-- 面包屑区域 -->
    <bread-detail
      :category="infoobj.categories"
      :name="infoobj.name"
    ></bread-detail>
    <!-- 商品基本信息区域 -->
    <div class="goods-info">
      <goods-image :imgarr="infoobj.mainPictures"></goods-image>
      <div>
        <goods-name
          :name="infoobj.name"
          :desc="infoobj.desc"
          :price="skuobj.price || infoobj.price"
          :oldPrice="skuobj.oldPrice || infoobj.oldPrice"
        ></goods-name>
        <goods-sku
          :specs="infoobj.specs"
          :skus="infoobj.skus"
          @send="getSkuData"
        ></goods-sku>
        <xtx-numbox :cont="cont"></xtx-numbox>
        <button class="but" @click="addCart">加入购物车</button>
      </div>
    </div>
    <!-- 同类商品推荐区域 -->
    <goods-relevant
      :relevantlist="relevantlist"
      :relevant="relevant"
    ></goods-relevant>
    <!-- 商品详情区域 -->
    <div class="goods-footer">
      <!-- 详情区 -->
      <goods-tabs
        :details="infoobj.details"
        :evaluatelist="evaluatelist"
        :evaluatelist2="evaluatelist2"
      ></goods-tabs>
      <!-- 热榜 -->
      <goods-hot :hot1="hot1" :hot2="hot2"></goods-hot>
    </div>
  </div>
</template>

<script>
import { getcategoods, getSame, getHot } from "@/utils/api/detail";
import BreadDetail from "./BreadDetail.vue";
import GoodsImage from "./GoodsImage.vue";
import GoodsName from "./GoodsName.vue";
import GoodsRelevant from "./GoodsRelevant.vue";
import GoodsTabs from "./GoodsTabs.vue";
import GoodsHot from "./GoodsHot.vue";
import qs from "querystring";
import axios from "axios";
import GoodsSku from "./GoodsSku.vue";
import XtxNumbox from "../utils/XtxNumbox.vue";
import { cartadd } from "@/utils/api/cartapi";
export default {
  components: {
    BreadDetail,
    GoodsImage,
    GoodsName,
    GoodsRelevant,
    GoodsTabs,
    GoodsHot,
    GoodsSku,
    XtxNumbox,
  },
  data() {
    return {
      infoobj: {},
      relevantlist: [],
      relevant: "同类商品推荐",
      hot1: [],
      hot2: [],
      sppl: [],
      evaluatelist: [],
      evaluatelist2: [],
      query: {
        page: 1,
        pageSize: 10,
      },
      skuobj: {},
      cont: 1,
    };
  },
  methods: {
    // 接收同规格组件传递的数据
    getSkuData(obj) {
      this.skuobj = obj;
    },
    async getgoodslist(id) {
      let res = await getcategoods(id);
      this.infoobj = res.result;
    },
    //同类商品
    async xuan1(id) {
      var arr = {
        id: id,
        limit: 16,
      };
      let resa = await getSame(arr);
      // console.log(resa);
      this.relevantlist = resa.result;
    },
    //热销
    async xiao1(id) {
      let arr1 = { id: id, limit: 3, type: 1 };
      let resaa = await getHot(arr1);
      // console.log(res);
      this.hot1 = resaa.result;
      let arr2 = { id: id, limit: 3, type: 2 };
      let resaas = await getHot(arr2);
      // console.log(resaas);
      this.hot2 = resaas.result;
    },
    // 评论分类
    async xuan3(id) {
      let ressss = await axios.get(
        `https://mock.boxuegu.com/mock/1175/goods/${id}/evaluate`
      );
      // console.log(ressss);
      this.evaluatelist = ressss.data.result;
    },
    async xuan4(id) {
      let resst = await axios.get(
        `https://mock.boxuegu.com/mock/1175/goods/${id}/evaluate/page?${qs.stringify(
          this.query
        )}`
      );
      // console.log(resst);
      this.evaluatelist2 = resst.data.result;
    },
    //添加到购物车

    async addCart() {
      if (
        this.$store.state.user.userinfo &&
        this.$store.state.user.userinfo.token
      ) {
        let res = await cartadd(this.skuobj.skuid, this.cont);
        if (res.msg == "操作成功") {
          this.$store.dispatch("cart/asynccartlist");
        }
      } else {
        // 检查规格是否合适
        if (!this.skuobj.skuid) {
          this.message({ text: "请选择合适的规格再加入", type: "error" });
          return false;
        }
        //判断库存是否充足  number
        if (this.skuobj.inventory < this.count) {
          this.message({ text: "库存不足", type: "error" });
          return false;
        }
        //判断当前规格产品是否再购物车中存在
        let index = this.$store.state.cart.list.findIndex(
          (item) => item.skuid == this.skuobj.skuid
        );
        // console.log(this.skuobj);
        if (index == -1) {
          //存商品
          let obj = {
            count: this.cont,
            selected: true,
            name: this.infoobj.name,
            picture: this.infoobj.mainPictures[0],
            price: this.skuobj.price,
            skuId: this.skuobj.skuid,
            attrsText: this.skuobj.skuname,
            isCollect: false,
            nowPrice: this.skuobj.price,
          };
          //调用vuex中的方法
          this.$store.commit("cart/addList", obj);
        } else {
          //加数量
          this.$store.commit("cart/changeNum", { index, number: this.cont });
        }
      }
    },
  },
  mounted() {
    this.getgoodslist(this.$route.query.id);
    this.xuan1(this.$route.query.id);
    this.xiao1(this.$route.query.id);
    this.xuan3(this.$route.query.id);
    this.xuan4(this.$route.query.id);
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";
.but {
  width: 160px;
  height: 40px;
  background: $xtxColor;
  border: none;
  border-radius: 5px;
  margin-top: 10px;
}
.goods-info {
  width: 1240px;
  margin: auto;
  display: flex;
}
.goods-footer {
  width: 1240px;
  margin-top: auto;
  display: flex;
}
</style>